<% layout('/layout/default.html', {title: '登录', libs: ['validate', 'login'], bodyClass: 'app flex-row align-items-center'}){ %>
<% var productName = @Global.getProperty('productName'), productVersion = @Global.getProperty('version'); %>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card-group">
                <div class="card p-4">
                    <div class="card-body">
                        <h1 style="margin-bottom: 1.5rem;">${productName} <small>${productVersion}</small></h1>
                        <p class="text-muted"></p>
                        <form id="loginForm" action="${ctx}/login" method="post">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                      <i class="icon-user"></i>
                                    </span>
                                </div>
                                <input name="username" class="form-control" type="text" data-msg-required="${i18n('请填写登录账号')}"
                                       placeholder="${i18n('登录账号')}" >
                            </div>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                      <i class="icon-lock"></i>
                                    </span>
                                </div>
                                <input name="password" class="form-control" type="password" data-msg-required="${i18n('请填写登录密码')}"
                                           placeholder="${i18n('登录密码')}" >

                            </div>

                            <div id="isValidCodeLogin" style="display:${isValidateCodeLogin?'blank':'none'}">
                                <#form:validcode name="validateCode" />
                            </div>
                            <div class="mb-3">
                                <label title="${i18n('公共场所慎用,下次不需要再填写帐号和密码')}">
                                    <input type="checkbox" name="rememberMe" data-style="square-blue">&nbsp;${i18n('记住密码')}
                                </label>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <button id="btnSubmit" type="submit" class="btn btn-primary px-4 " type="button">${i18n('立即登录')}</button>
                                </div>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-6 text-left">
                                <button class="btn btn-link px-0" type="button">[ ${i18n('忘记密码')} ]</button>
                            </div>
                            <div class="col-6 text-right">
                                <% if (@com.jsite.common.i18n.I18nLocaleResolver.enabled()){ %>
                                <li class="nav-item dropdown ml-auto">
                                    <a href="javascript:" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fa icon-globe"></i> ${@DictUtils.getDictLabel(lang(), 'sys_lang_type', '简体中文')}
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <% for(var dict in @DictUtils.getDictList('sys_lang_type')){ %>
                                        <a href="${ctx}/login?lang=${dict.value}" class="dropdown-item">${dict.label}</a>
                                        <% } %>
                                    </div>
                                </li>
                                <% } %>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
                    <div class="card-body text-center">
                        <div>
                            <h2>Sign up</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua.</p>
                            <button class="btn btn-primary active mt-3" type="button">Register Now!</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-foot">
                &copy; ${@DateUtils.getYear()} ${productName} - Powered By <a href="http://jsite.org.cn">JSite</a>
            </div>
        </div>
    </div>
</div>
<% } %>